<template>
  <div class="iwork_box">
    <!-- 头部返回 -->
    <div class="iwork_header">
      <div class="header_icon">
        <i class="el-icon-arrow-left icon_left" @click="goHome"></i>
      </div>
      <div class="header_title" v-if="falg == 1">{{ serachDuFrom.title }}</div>
      <div class="header_title" v-else>{{ serachDuFrom.newTitle }}</div>
    </div>
    <div class="iwork_detail">
      <div class="detail_title">预警</div>
      <div class="detail_content" v-html="serachDuFrom.contant"></div>
    </div>
    <!-- 附件清单 -->
    <div class="iwork_file">
      <div class="file_title">附件清单</div>
      <div class="file_name">
        <ul v-for="(item, index) of fileListData" :key="index">
          <li>
            <a :href="item.fileName">{{ item.fileNameTiele }}</a>
          </li>
          <div class="file_line"></div>
        </ul>
      </div>
    </div>
    <!-- 表单 -->
    <div class="iwork_from">
      <el-form
        label-position="top"
        :model="iworkFrom"
        :rules="rules"
        ref="iworkFrom"
      >
        <el-form-item
          label="工单超出原因分析"
          class="iwork_from_item"
          prop="processWork"
        >
          <el-input
            :disabled="
              falg == 1 && iworkFrom.processSubmint === '0' ? false : true
            "
            v-model="iworkFrom.processWork"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 4 }"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="TOP区域及存在问题"
          class="iwork_from_item"
          prop="processTop"
        >
          <el-input
            :disabled="
              falg == 1 && iworkFrom.processSubmint === '0' ? false : true
            "
            v-model="iworkFrom.processTop"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 4 }"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="整改措施"
          class="iwork_from_item"
          prop="processRectification"
        >
          <el-input
            :disabled="
              falg == 1 && iworkFrom.processSubmint === '0' ? false : true
            "
            v-model="iworkFrom.processRectification"
            type="textarea"
            :maxlength="maxlength"
            :autosize="{ minRows: 3, maxRows: 4 }"
          ></el-input>
        </el-form-item>
        <el-form-item class="submit_box">
          <el-button
            v-if="falg == 1"
            :disabled="iworkFrom.processSubmint === '0' ? false : true"
            type="primary"
            @click="onSubmit('iworkFrom')"
            style="margin-top: 10px"
            class="button_box"
            >提 交</el-button
          >
        </el-form-item>
        <el-form-item class="submit_box_tow">
          <!-- :disabled="iworkFrom.processExamine === '0' ? false : true" -->
          <el-button
            v-if="falg != 1"
            type="primary"
            @click="onReturn"
            style="margin-top: 10px"
            class="button_box_tow"
            >退 回</el-button
          >
          <!-- :disabled="iworkFrom.processExamine === '0' ? false : true" -->
          <el-button
            v-if="falg != 1"
            type="primary"
            @click="onExamine"
            style="margin-top: 10px"
            class="button_box_tow"
            >通 过</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Popup } from "vant";

Vue.use(Popup);
export default {
  data() {
    return {
      maxlength: 30,
      fileData: [],
      logId: "",
      tempId: "",
      falg: 1, //区分是提交还是通过、退回按钮 1：提交 2：通过，退回
      serachDuFrom: {
        title: "", //提交人标题
        contant: "",
        newTitle: "", //审核人标题
      }, //接口返回的信息
      fileListData: [], //附件清单
      iworkFrom: {
        processLogId: null, //该流程对应logId
        newlogId: null, //审批时候回拼接在地址栏，提交时候没有
        processWork: "", //工单超出原因分析
        processTop: "", //top区域存在问题
        processRectification: "", //整改举措
        proportionWork: null, //不规范工单占比
        mainProblems: "", //存在的主要问题
        processSubmint: null, //判断提交按钮/表单内容 是否禁用 0：可提交 1：不可提交
        processExamine: null, //判断审批按钮/表单内容 是否禁用 0：可审批 1：不可审批
        staffAccount: null, //工号
        title: "", //阅处人标题
      },
      rules: {
        processWork: [
          {
            required: true,
            message: "请输入工单超出原因分析",
            trigger: "blur",
          },
        ],
        processTop: [
          {
            required: true,
            message: "请输入TOP区域及存在问题",
            trigger: "blur",
          },
        ],
        processRectification: [
          { required: true, message: "请输入整改措施", trigger: "blur" },
        ],
      },
      historyObj: {}, //
    };
  },
  activated() {
    console.log("------------", this.$route.params.item);
    console.log("------------", this.$route.params.item.htmlUrl);
    // return
    this.historyObj = this.$route.params.item;
    if (this.historyObj.htmlUrl) {
      console.log("123");
      this.getUrl(this.historyObj.htmlUrl);
    }
  },
  created() {
    // this.getUrl(); //获取地址栏信息
  },
  methods: {
    //获取URL地址
    getUrl(htmlUrl) {
      //   let srt = `http://134.64.251.212:8084/#/iworkHtml?logId=1557733&newlogId=1557690`;
      let srt = htmlUrl;
      // let srt = window.location.href;
      console.log("srt===", srt);
      var reg = srt.substring(srt.indexOf("?") + 1, srt.length).split("&");
      console.log("red==", reg);
      reg.forEach((item) => {
        let data = item.split("=");
        let x = data[0];
        console.info("地址栏", x);
        if (x == "logId") {
          this.logId = data[1];
        }
        if (x == "tempId") {
          this.tempId = data[1];
        }
        if (x == "falg") {
          this.falg = data[1];
        }
        if (x == "newlogId") {
          this.newlogId = data[1];
        }
      });
      console.log("logId=", this.logId);
      console.log("tempId=", this.tempId);
      console.log("falg=", this.falg);
      console.log("newlogId=", this.newlogId);
      this.getSerachProcessdu();
      // console.log("sssssssssssss");
    },
    //长流程查询接口
    getSerachProcessdu() {
      return this.$http({
        url: this.$http.adornUrl("/cpcpProcessdu/serachProcessdu"),
        method: "get",
        params: this.$http.adornParams({
          logId: this.logId,
        }),
      }).then((res) => {
        // console.log("11111111111111111111");
        if (res.data.code === 0) {
          // console.log("res====", res);
          this.serachDuFrom = res.data.data;

          // let str = "软件开发项目的方案应该包括以下部分：\n1. 项目目标：明确软件项目的目标，例如增加用户数量、提高用户满意度等。\n2. 功能需求：列出软件项目需要实现的功能需求，例如用户注册、登录、浏览网页、购物等。\n\n3. 技术选型：根据软件项目的功能需求和技术可行性，选择适合的编程语言、框架、数据库等。\n\n4. 开发环境：安装并配置开发环境，例如IDE、版本控制工具等。\n\n5. 项目计划：制定项目计划，包括开发进度、测试进度、部署进度等。\n\n6. 人员配备：确定软件项目所需的人员配备，例如开发人员、测试人员、运维人员等。\n\n7. 资金预算：估算软件项目的预算，包括开发费用、测试费用、部署费用等。\n\n8. 风险管理：识别并管理项目中的风险，例如技术风险、人员流动风险等。\n以上是软件开发项目的方案，具体内容根据项目的实际情况进行调整。"
          let str = res.data.data.contant;
          str = str.replace(/\n/g, "<br />");
          this.serachDuFrom.contant = str;
          this.iworkFrom.processLogId = res.data.data.processLogId;
          this.iworkFrom.processWork = res.data.data.processWork;
          this.iworkFrom.processTop = res.data.data.processTop;
          this.iworkFrom.processSubmint = res.data.data.processSubmint;
          this.iworkFrom.processExamine = res.data.data.processExamine;
          this.iworkFrom.proportionWork = res.data.data.proportionWork;
          this.iworkFrom.mainProblems = res.data.data.mainProblems;
          this.iworkFrom.staffAccount = res.data.data.processSubmintAccount;
          this.iworkFrom.title = res.data.data.title;
          // let titleFu = res.data.data.title;
          this.iworkFrom.processRectification =
            res.data.data.processRectification;
          let fileData = res.data.data.processFile.split(",");
          let fileListName = [];
          console.log("fileData====", fileData);
          // console.log("副标题==",titleFu);
          //获取文件-循环
          for (let index = 0; index < fileData.length; index++) {
            console.log("index,", index);
            console.log("index,", fileData[index]);
            let obj = {};
            obj.id = index;
            //预览的地址
            obj.fileName = fileData[index];
            let indexOf = fileData[index].lastIndexOf("/");
            let str = fileData[index].substring(
              indexOf + 1,
              fileData[index].length
            );
            let ttt = "";
            if (str.includes("-")) {
              ttt = str.split(".")[0].split("-")[0] + "." + str.split(".")[1];
            } else {
              ttt = str;
            }
            // let str = element.fileNameTiele.split(".")[0].split("-")[0] + "." +element.fileNameTiele.split(".")[1]
            console.log("tttttt=", ttt);
            // obj.fileNameTiele = str
            //显示的地址
            obj.fileNameTiele = ttt;
            fileListName.push(obj);
            this.fileListData = fileListName;
          }
          console.log("fileListData===", this.fileListData);
          console.log("iworkFrom===", this.iworkFrom);
        } else {
          this.$message.error(res.data.msg);
          this.serachDuFrom = {};
        }
      });
    },
    //返回
    goHome() {
      console.log("返回");
      // window.history.go(-1);
      //   history.back();
      // this.$router.push({
      //   name: "iworkHtml",
      //   params: {
      //     logId: this.logId,
      //   },
      // });
      this.$router.go(-1); // 返回上一页
    },
    //点击附件
    handleFile(obj) {
      console.log("obj=", obj);
      let suffix = obj.fileName.split("."); // split后获得文件后缀
      let fileName = suffix[0];
      suffix = suffix[suffix.length - 1];
      console.log("suffix==", suffix);
      let fileTypeMime = null;
      switch (
        suffix // switch获取后缀对应的mime 可参考上文链接
      ) {
        case "png":
          fileTypeMime = "image/png";
          break;
        case "doc":
          fileTypeMime = "application/msword";
          break;
        case "docx":
          fileTypeMime =
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
          break;
        case "jpg":
        case "jpeg":
          fileTypeMime = "image/jpeg";
          break;
        case "gif":
          fileTypeMime = "image/gif";
          break;
        case "svg":
          fileTypeMime = "image/svg+xml";
          break;
        case "tif":
        case "tiff":
          fileTypeMime = "image/tiff";
          break;
        case "txt":
          fileTypeMime = "text/plain";
          break;
        case "ppt":
          fileTypeMime = "application/vnd.ms-powerpoint";
          break;
        case "pptx":
          fileTypeMime =
            "application/vnd.openxmlformats-officedocument.presentationml.presentation";
          break;
        case "xls":
          fileTypeMime = "application/vnd.ms-excel";
          break;
        case "xlsx":
          fileTypeMime =
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
          break;
        case "zip":
          fileTypeMime = "application/zip";
          break;
        case "7z":
          fileTypeMime = "application/x-7z-compressed";
          break;
      }
      console.log("fileTypeMime=", fileTypeMime);
      this.$http({
        url: this.$http.adornUrl("cpcplog/downLogTable2"),
        method: "get",
        params: this.$http.adornParams({}),
        responseType: "arraybuffer",
      }).then((data) => {
        console.log("data==", data);
        console.log("data==", data.status);
        if (data.status == 200) {
          console.log("111111111111111");
          let content = data; //arraybuffer类型数据
          let resBlob = new Blob([content]);
          console.log("resBlob=", resBlob);

          let reader = new FileReader();
          console.log("reader=", reader);
          reader.readAsText(resBlob, "utf-8");
          reader.onload = () => {
            try {
              // 判断是否可以转化为json格式，可以就说明不是文件流，错误返回值
              let res = JSON.parse(reader.result);
              console.log(res);
              this.$message.destroy();
              this.$message.error(res.message);
            } catch (err) {
              // 报错说明不能转化为json，是文件流，下载文件
              console.log("res status", err);
              console.log("res status", data);
              // let blob = new Blob([data]); // 原 此种方式在pc端可以下载，但是手机端不行
              let blob = new Blob([data], {
                type: fileTypeMime,
                // type: data.headers[fileTypeMime],
              }); //
              // let blob = new Blob([res.data], { type: headers["content-type"] });
              const blobUrl = window.URL.createObjectURL(blob);
              console.log("blobUrl==", blobUrl);
              const a = document.createElement("a");
              a.style.display = "none";
              a.download = fileName;
              a.href = blobUrl;
              // console.log("a.download==",a.download);
              // console.log("a.href==",a.href);
              a.click();
            }
          };
        } else {
          console.log("222222222222222222");
        }
      });
    },
    //提交
    onSubmit(iworkFrom) {
      console.log("11111", this.iworkFrom);
      const {
        processLogId,
        processWork,
        processTop,
        processRectification,
        proportionWork,
        mainProblems,
      } = this.iworkFrom;
      // this.$message.success("提交成功");
      // return
      this.$refs[iworkFrom].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl("cpcpProcessdu/submit"),
            method: "post",
            data: this.$http.adornData({
              processWork: processWork,
              processTop: processTop,
              processRectification: processRectification,
              processLogId: processLogId,
              submitFile: "",
              proportionWork: proportionWork,
              mainProblems: mainProblems,
            }),
          }).then((res) => {
            if (res.data.code === 0) {
              console.log("-------------", res.data);
              // return
              this.$message({
                message: "提交成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  // this.$nextTick(() => {
                  //   history.back();
                  // });
                  setTimeout(() => {
                    this.$router.back(-1);
                  }, 1500);
                },
              });
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //退回
    onReturn() {
      console.log("this.iworkFrom;==", this.serachDuFrom);
      // console.log("this.iworkFrom;==",this.serachDuFrom.processExamine);
      // console.log("this.iworkFrom;==",typeof this.serachDuFrom.processExamine);
      if (this.serachDuFrom.processExamine === "1") {
        this.$message.info("该工单已处理");
      } else {
        console.log("sdgfsdfgsdfgfd");
        this.$http({
          url: this.$http.adornUrl("cpcpProcessdu/approveDu"),
          method: "get",
          params: this.$http.adornParams({
            id: this.serachDuFrom.id,
          }),
        }).then((res) => {
          if (res.data.code === 0) {
            console.log("-------------", res.data);
            this.$message({
              message: "退回成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.$nextTick(() => {
                  history.back();
                });
              },
            });
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },
    //通过
    onExamine() {
      const { processLogId } = this.iworkFrom;
      console.log("11111", this.iworkFrom);
      // this.$message.success("提交成功");
      // return
      if (this.serachDuFrom.processExamine === "1") {
        this.$message.info("该工单已处理");
      } else {
        this.$http({
          url: this.$http.adornUrl("cpcpProcessdu/UpdateVo"),
          method: "get",
          params: this.$http.adornParams({
            logId: processLogId,
            newLogId: this.newlogId,
          }),
        }).then((res) => {
          if (res.data.code === 0) {
            console.log("-------------", res.data);
            this.$message({
              message: "审批成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.$nextTick(() => {
                  history.back();
                });
              },
            });
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeUpload(file) {
      console.log("file===", file);

      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);

      let isLt = file.size / 1024 / 1024 < 20; // 判断是否小于2mb
      console.log("-----------------", isLt);
      console.log("testmsg===", testmsg);
      if (!isLt) {
        this.$message({
          message: "请上传小于2MB图片!",
          type: "info",
          offset: 80,
        });
        return false;
      } else {
        return true;
      }
    },
    // 上传成功(热门文章)
    uploadSuccess(response, file, fileList) {
      console.log("11111111111", response);
      console.log("11111111111", file);
      console.log("11111111111", fileList);
      if (response.code === 500) {
        this.$message.error(response.msg);
      } else {
        this.$message.success("上传成功");
        // this.getPerson();
      }
      // this.getTableData();
    },
    // 上传失败(热门文章)
    // uploadError(response, file, fileList) {
    //   this.$message.error("上传失败，请联系管理员");
    // },
    beforeRemove(file, fileList) {
      console.log("file===", file);
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
  mounted() {},
};
</script>

<style lang=scss scoped>
.iwork_box {
  width: 100%;
  /* height: 100vh; */
  /* border: 1px solid #000; */
  padding-bottom: 20px;
  background: rgb(248, 248, 248);
  /* background: gray; */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  .iwork_header {
    width: 100%;
    position: fixed;
    top: 0px;
    /* color: #2196f3; */
    line-height: 2.9625rem;
    font-size: 16px;
    background: #fff;
    display: flex;
    z-index: 9999;
    > div {
      display: inline-block;
      /* flex: 4; */
      /* width: 40%; */
    }
    .header_icon {
      /* width: 33%; */
      font-size: 25px;
      color: rgb(160, 160, 160);
      margin-left: 0.3125rem;
    }
    .header_title {
      text-align: center;
      /* width: calc(100% - 10px); */
      width: calc(100% - 55px);
      font-weight: bolder;
      font-size: 17px;
    }
  }
  .iwork_logo {
    padding-left: 1.25rem;
    padding-top: 0.3125rem;
    img {
      width: 20%;
      height: 20%;
    }
    .logo_title {
      padding-left: 0.9375rem;
      font-weight: bolder;
    }
  }
  .iwork_detail {
    background: #fff;
    border-radius: 5px;
    /* padding-left: 1.25rem; */
    margin-top: 3.75rem;
    width: 97%;
    padding: 10px 15px;
    position: relative;

    /* border: 1px solid red; */
    .detail_title {
      font-weight: bolder;
      font-size: 16px;
      text-align: center;
      color: red;
    }
    .detail_line {
      border: 0.1px solid #f3efef;
      width: 100%;
      margin-top: 0.3125rem;
    }
    .detail_content {
      margin-top: 0.325rem;
      line-height: 1.55rem;
      min-height: 4.375rem;
      /* color: #a19e9e; */
      color: #969494;
      /* width: 98%; */
    }
    .detail_content_time {
      margin-top: 0.325rem;
      line-height: 1.55rem;
      /* min-height: 4.375rem; */
      color: red;
    }
  }
  .iwork_detail::after {
    content: "";
    background: url("../../../assets/homeNew/iworkHtml.png") no-repeat;
    /* background-size: 60% 60%; */
    background-size: 160px 100px;
    background-position: 95% 10%;
    opacity: 0.2;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .iwork_file {
    /* padding-left: 1.25rem; */
    width: 97%;
    padding: 10px 15px;
    margin-top: 0.925rem;
    /* color: #00BCD4; */
    .file_title {
      color: #2196f3;
      /* color: rgb(79,161,252); */
    }
    .file_name {
      width: 98%;
    }
    .file_name ul {
      list-style: none;
      padding-left: 0.625rem;
      margin-bottom: 0px;
      margin-top: 0.625rem;
      line-height: 1.4375rem;
    }
    .file_name ul li a {
      text-decoration: none;
    }
    .file_name ul li span {
      color: rgba(0, 0, 255, 0.5);
      float: right;
    }
    .file_line {
      border: 0.1px dashed #f3efef;
      width: 100%;
      margin-top: 0.3125rem;
    }
  }
  .iwork_from {
    /* padding-left: 1.25rem; */
    /* margin-top: 0.925rem; */
    width: 97%;
    /* border: 1px solid red; */
    /* background: #fff; */
    /* border-radius: 5px; */
    /* padding: 10px 15px; */
  }
  .iwork_from_item {
    /* padding-left: 1.25rem; */
    margin-top: 0.925rem;
    width: 100%;
    /* border: 1px solid red; */
    background: #fff;
    border-radius: 5px;
    /* padding: 10px 15px; */
    padding: 10px 15px 25px 15px;
  }
  .iwork_from /deep/ .el-message-box {
    width: 84%;
  }
  .iwork_from /deep/ .el-form-item {
    margin-bottom: 0px;
  }
  .iwork_from /deep/ .el-form-item__label {
    color: #000;
    font-weight: bolder;
  }
  .iwork_from /deep/ .el-textarea__inner {
    /* color: #9b9b9b; */
    color: #2196f3;
    border: 1px solid gainsboro;
    /* border: none; */
    outline: none;
    resize: none;
    /* width: 95%; */
  }
  .iwork_from /deep/ .el-textarea.is-disabled .el-textarea__inner {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }
  /* .iwork_from /deep/ .el-textarea__inner {
  resize: none;
} */
  .iwork_from /deep/ .el-form--label-top .el-form-item__label {
    padding: 0px;
  }
  .submit_box {
    width: 90%;
    text-align: right;
  }
  .button_box {
    width: 90%;
  }
  .submit_box_tow {
    width: 100%;
    text-align: center;
  }
}
</style>
<style lang="scss">
.el-message-box {
  width: 84% !important;
}
</style>